<template>
   <div class="mainDiv">
     <el-container class="main_container">
       <el-main>
         <el-card>
           <div slot="header" class="clearfix">
               <span>移交登记</span>
           </div>
           <!-- <el-form ref="form" :model="form" :rules="rules" label-width="110px">
             <el-row :gutter="20">
               <el-col :span="6">
                 <el-form-item label="单位" prop="deptId">
                   <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择单位"
                     style="width: 220px" />
                 </el-form-item>
               </el-col>
               <el-col :span="6">
                 <el-form-item label="暂存类型" prop="type">
                   <el-select v-model="form.type" placeholder="请选择暂存类型">
                     <el-option v-for="dict in dict.type.oms_staging_type" :key="dict.value" :label="dict.label"
                       :value="dict.value"></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="6">
                 <el-form-item label="登记人" prop="registerer">
                   <el-input v-model="form.registerer" placeholder="请输入登记人" style="width: 220px;" />
                 </el-form-item>
               </el-col>
               <el-col :span="6">
                 <el-form-item label="登记时间" prop="registerTime">
                   <el-date-picker clearable  v-model="form.registerTime" type="datetime"
                     value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择登记时间">
                   </el-date-picker>
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row :gutter="20">
               <el-col :span="6">
                 <el-form-item label="仓库" prop="storeId">
                   <treeselect v-model="form.storeId" :options="storeOptions" :show-count="true" placeholder="请选择仓库" style="width: 220px;"/>
                 </el-form-item>
               </el-col>
               <template v-if="form.type == '1'">
                 <el-col :span="6">
                   <el-form-item label="调用时间" prop="transferTime">
                     <el-date-picker clearable size="small" v-model="form.transferTime" type="datetime"
                       value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择调用时间">
                     </el-date-picker>
                   </el-form-item>
                 </el-col>
                 <el-col :span="6">
                   <el-form-item label="归还时间" prop="returnTime">
                     <el-date-picker clearable size="small" v-model="form.returnTime" type="datetime"
                       value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择归还时间">
                     </el-date-picker>
                   </el-form-item>
                 </el-col>
               </template>
             </el-row>
             <el-row>
               <el-col>
                 <el-form-item label="暂存说明" prop="remark">
                   <el-input type="textarea" v-model="form.remark" placeholder="请输入暂存说明" style="width: 1470px;" />
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row :gutter="15" v-if="form.type == '1'">
               <el-col>
                 <el-form-item label="调用原因" prop="transferRemark">
                   <el-input type="textarea" v-model="form.transferRemark" placeholder="请输入调用原因" style="width: 1470px;" />
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row>
               <el-col>
                 <el-form-item label="附件" prop="pics">
                   <image-upload v-model="form.pics"></image-upload>
                 </el-form-item>
               </el-col>
             </el-row>
           </el-form> -->
           <el-descriptions :column="4" border>
               <el-descriptions-item label="单位">{{form.deptName}}</el-descriptions-item>
               <el-descriptions-item label="移交类型">
                 <dict-tag :options="dict.type.oms_staging_type" v-model="form.type"></dict-tag>
               </el-descriptions-item>
               <el-descriptions-item label="登记人">{{form.updateName}}</el-descriptions-item>
               <el-descriptions-item label="登记时间">
                  <span>{{ parseTime(form.updateTime) }}</span>
               </el-descriptions-item>
               <!-- <el-descriptions-item label="仓库">{{form.storeName}}</el-descriptions-item> -->
               <template v-if="form.type == '1'">
                 <el-descriptions-item label="调用时间">
                    <span>{{ parseTime(form.transferTime, '{y}-{m}-{d}') }}</span>
                 </el-descriptions-item>
                 <el-descriptions-item label="归还时间" span="2">
                    <span>{{ parseTime(form.returnTime, '{y}-{m}-{d}') }}</span>
                 </el-descriptions-item>
               </template>
               <!-- <el-descriptions-item label="移交说明" span="4">{{form.remark}}</el-descriptions-item> -->
               <el-descriptions-item label="调用原因" span="4" v-if="form.type == '1'">{{form.transferRemark}}</el-descriptions-item>
               <el-descriptions-item label="附件" span="4">
                 <el-image v-if="form.pics"
                   style="width: 120px; height: 60px;margin-right: 5px;" :src="form.pics.split(',')[0]" fit="scale-down"
                   :preview-src-list="form.pics.split(',')"></el-image>
               </el-descriptions-item>

           </el-descriptions>
         </el-card>
         <el-card class="mt10">
           <div slot="header" class="clearfix">
               <span>财物清单</span>
           </div>
           <template v-for="(item,index) in form.dtls">
             <el-card style="width: 800px;float: left;" class="mr10 mb10">
               <div slot="header" class="clearfix">
                   <span>序号{{index+1}}</span>
               </div>
               <el-descriptions border :column="2" :labelStyle="{width:'180px'}" :contentStyle="{width:'300px'}">
                   <el-descriptions-item label="财物编号">
                     <span>{{item.pno}}</span>
                   </el-descriptions-item>
                   <el-descriptions-item label="财物分类">
                     <span>{{item.classifyName}}</span>
                   </el-descriptions-item>
                   <el-descriptions-item label="财物名称">
                     <span>{{item.name}}</span>
                   </el-descriptions-item>
                   <el-descriptions-item label="财物数量">
                       <span>{{item.nums}}</span>
                   </el-descriptions-item>
                   <el-descriptions-item label="财物特征" :span="4">
                      <span>{{item.character}}</span>
                   </el-descriptions-item>
                   <el-descriptions-item label="附件" :span="4">
                     <el-image v-for=" oss in item.oss"
                       style="width: 120px; height: 60px;margin-right: 5px;" :src="oss.url" fit="scale-down"
                       :preview-src-list="[oss.url]"></el-image>
                   </el-descriptions-item>
               </el-descriptions>
             </el-card>
           </template>
         </el-card>
         <selectProperty ref="elDrawer" @handleSelected="handleSelected"></selectProperty>
       </el-main>
       <el-footer>
         <div class="footerDivClass">
           <el-button @click="close()">返 回</el-button>
         </div>
       </el-footer>
     </el-container>
   </div>
</template>

<script>
  import {
    listStaging,
    getStaging,
    delStaging,
    addStaging,
    updateStaging
  } from "@/api/oms/staging";
  import {
    treeselect
  } from "@/api/system/dept";
  import {
    storeTreeselect,
  } from "@/api/wms/store";
  import {
    classifyTreeselect
  } from "@/api/oms/classify";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import selectProperty from "@/components/SelectProperty/index.vue";
  export default {
    name: "StagingAdd",
    dicts: ['oms_staging_type'],
    components: {
      Treeselect,
      selectProperty
    },
    created() {
      this.reset()
      this.getTreeselect();
      this.getStoreTreeselect();
      this.getClassifyTreeselect();
      const id = this.$router.currentRoute.params.id;
       if (null != id && "" != id && undefined != id) {
         getStaging(id).then(response=>{
           this.form = response.data;
         })
       }
    },

    data(){
      return{
        form:{},
        rules:{
          deptId: [{
            required: true,
            message: "民警单位不能为空",
            trigger: "blur"
          }],
          type: [{
            required: true,
            message: "移交类型不能为空",
            trigger: "blur"
          }],
          registerer: [{
            required: true,
            message: "登记人不能为空",
            trigger: "blur"
          }],
          registerTime: [{
            required: true,
            message: "登记时间不能为空",
            trigger: "blur"
          }],
          storeId: [{
            required: true,
            message: "仓库不能为空",
            trigger: "blur"
          }],
          transferTime: [{
            required: true,
            message: "调用时间不能为空",
            trigger: "blur"
          }],
          returnTime: [{
            required: true,
            message: "归还时间不能为空",
            trigger: "blur"
          }],
          transferRemark: [{
            required: true,
            message: "移交说明不能为空",
            trigger: "blur"
          }],
        },
        deptOptions:[],
        storeOptions:[],
        classifyOptions:[],
      }
    },
    methods:{

      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
      /** 查询分类下拉树结构 */
      getStoreTreeselect() {
        storeTreeselect().then(response => {
          this.storeOptions = response.data;
        });
      },
      /** 查询分类下拉树结构 */
      getClassifyTreeselect() {
        classifyTreeselect().then(response => {
          this.classifyOptions = response.data;
        });
      },
      close(){
        const obj = {
          path: "/oms/staging",
          query: { t: Date.now(), pageNum: this.$route.query.pageNum },
        };
        this.$tab.closeOpenPage(obj);
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          deptId: undefined,
          type: undefined,
          registerTime: undefined,
          registerer: undefined,
          storeId: undefined,
          remark: undefined,
          pics: undefined,
          status: "0",
          transferTime: undefined,
          transferRemark: undefined,
          returnTime: undefined,
          createBy: undefined,
          createTime: undefined,
          updateBy: undefined,
          updateTime: undefined,
          delFlag: undefined,
          dtls: []
        };
        this.resetForm("form");
      },
      dtlAdd(){
        let data = {
          id: undefined,
          taskId: undefined,
          pno: undefined,
          name: undefined,
          classifyId: undefined,
          charater: undefined,
          nums: 0,
          oss: [],
          delFlag: '0'
        }
        this.form.dtls.push(data)
      },
      selectDtl() {
        this.$refs.elDrawer.open()
      },
      dtlDel(index) {
        // let index = scope.$index;
        // if (this.form.items[index].id && this.form.items[index].id != '') {
        //   this.form.items[index].delFlag = '2';
        // } else {
        //   this.form.items.splice(index, 1)
        // }
        this.form.dtls.splice(index, 1)
      },
      //获取选择后的财务数据
      handleSelected(array) {
        array.forEach(item => {
          item.delFlag = '0'
          item.id = undefined
          item.nums = '0'

          this.form.dtls.push(item)
        })
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.buttonLoading = true;
            if (this.form.id != null) {
              updateStaging(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.close();
              }).finally(() => {
                this.buttonLoading = false;
              });
            } else {
              addStaging(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                 this.close();
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  .mainDiv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .main_container {
    width: 100%;
    height: 100%;
  }

  .el-footer {
    background-color: #ffffff;
    color: #333;
    text-align: right;
    line-height: 60px;
    border-top: 1px solid #e6ebf5;
    box-shadow: 0px 0px 10px #cdcdcd;
    z-index: 1000;
  }
</style>
